<template>
    <el-dialog title="编辑" :visible.sync="cateEditerData.show" width="550px" center :close-on-click-modal='false' top="50px" @open="editerOpen">
        <el-form label-position="right" :model="cateEditerData.cate" ref="cateForm" label-width="100px" size="mini" :rules="rules">
            <el-form-item label='名称' prop="catName">
                <el-input v-model.trim="cateEditerData.cate.catName" placeholder='请输入分类名称'></el-input>
            </el-form-item>
            <el-form-item label='分类级别'>
                <el-radio-group v-model="cateEditerData.cate.levelNum" :disabled="cateEditerData.cate.catId!=''">
                    <el-radio :label='1'>一级分类</el-radio>
                    <el-radio :label='2'>二级分类</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='上级分类' v-if='cateEditerData.cate.levelNum!=1' prop='parentId'>
                <el-select v-model="cateEditerData.cate.parentId" placeholder="请选择">
                    <el-option v-for="parent in cateEditerData.parentList" :key="parent.catId" :label="parent.catName" :value="parent.catId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label='关联属性组' v-show='cateEditerData.cate.levelNum!=1'>
                <div style="width:90%;height:auto">
                    <el-checkbox-group v-model="cateEditerData.checkList">
                        <div style="width:33%;float:left" v-for='group in groupList' :key="group.keyId">
                            <el-checkbox  :label="group.keyId" >{{group.keyName}}</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </div>
            </el-form-item>
            <el-form-item label='小图标'>
                <el-upload
                    class="avatar-uploader"
                    :action="$store.state.upload"
                    :on-success="uploadSuccess"
                    :show-file-list="false">
                    <img v-if="cateEditerData.cate.catIcon!=''" :src="cateEditerData.cate.catIcon" class="avatar" style="">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label='大图标'>
                <el-upload
                    class="avatar-uploader"
                    :action="$store.state.upload"
                    :on-success="uploadBigSuccess"
                    :show-file-list="false">
                    <img v-if="cateEditerData.cate.largeIcon!=null" :src="cateEditerData.cate.largeIcon" class="avatar" style="">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="cateEditerData.show=false" size='mini'>取消</el-button>
        <el-button type="primary" @click="onsubmit" size='mini'>提交</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'cateEditer',
    data(){
        var checkCatName=(rule,value,callback)=>{
            if(!value){
                callback(new Error("分类名称不能为空"));
                return;
            }
            var params=new URLSearchParams();
            params.append("catName",value);
            params.append("catId",this.cateEditerData.cate.catId);
            this.$http.post(this.$store.state.url+"/form/unique/catname",params).then(
                response=>{
                    if(response.data.status==200)callback();
                    else callback(new Error(response.data.message));
                }
            ).catch();
        };
        return {
            groupList:[],
            rules:{
                catName:[
                    {required: true, validator: checkCatName, trigger: 'blur' },
                ],
                parentId:[
                    {required: true, message: '上级分类不能为空', trigger: 'blur,change' },
                ]
            },
        }
    },
    methods:{
        onsubmit:function(){
            this.$refs.cateForm.validate(
                valid=>{
                    if(valid)this.submitExecute();
                }
            );
        },
        submitExecute:function(){
            var params=new URLSearchParams();
            for(var key in this.cateEditerData.cate)params.append(key,this.cateEditerData.cate[key]);
            for(var i=0;i<this.cateEditerData.checkList.length;i++)params.append('propGroups',this.cateEditerData.checkList[i]);
            params.append('token','1');
            params.append('userId','1');
            this.$http.post(this.$store.state.url+'/category/add',params).then(
                function(response){
                    this.$emit('edited',response.data.data);
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.cateEditerData.show=false;
                }.bind(this)
            ).catch(
                function(error){
                    this.$message.error('保存失败');
                    this.cateEditerData.show=false;
                }.bind(this)
            );
        },
        uploadSuccess:function(response, file,fileList){
            this.cateEditerData.cate.catIcon=response.data.filename;
        },
        uploadBigSuccess:function(response, file,fileList){
            this.cateEditerData.cate.largeIcon=response.data.filename;
        },
        editerOpen:function(){
            if(this.$refs.cateForm!=null){
                this.$refs.cateForm.resetFields();
            }
            if(this.cateEditerData.cate.catId==""){
                this.cateEditerData.cate={
                    catId:'',
                    parentId:null,
                    catName: "",
                    catKey:null,
                    catDesc: null,
                    catIcon: "",
                    levelNum: 1,
                    sortOrder: 0,
                    status: 1,
                    children: 0,
                };
            }else{
                var params=new URLSearchParams();
                params.append('token','1');
                params.append('userId','1');
                params.append('catId',this.cateEditerData.cate.catId);
                this.$http.post(this.$store.state.url+"/category/detail",params).then(
                    response=>{
                        if(response.data.status==200){
                            this.cateEditerData.cate=response.data.data;
                        }else{
                            this.cateEditerData.show=false;
                            this.$message.error(response.data.message);
                        }
                    }
                ).catch(
                    error=>{
                        this.$message.error('编辑打开失败');
                    }
                );
            }
        }
    },
    props:['cateEditerData'],
    created:function(){
        this.$http.post(this.$store.state.url+"/property/grouplist").then(
            response=>{
            if(response.data.status==200)this.groupList=response.data.data;
            }
        ).catch();
    }
}
</script>

<style scoped>
.el-input{
    width:80%
}

.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px dashed #d9d9d9;
border-radius: 6px;
}
.avatar {
width: 100px;
height: 100px;
background-color:white;
margin:-1px -1px;
display: block;
border: 1px dashed #d9d9d9;
border-radius: 6px;
}
.avatar-uploader-icon:hover,.avatar:hover {
border-color: #409EFF;
}
</style>
